<template>
    <div class="wrapper">
        <mt-header title="账单详情" mtClass="no-bg"/>
        <div class="inner" v-show="isShow">
            <div class="list" v-if="totalElements>0">
                <div class="item" v-for="(item,index) in list" :key="index">
                    <div class="icon" :class="`bg${item.source}`"><span>{{item.sourceValue.slice(0,1)}}</span></div>
                    <div class="info">
                        <div class="desc"><span>{{item.sourceValue}}</span><span>{{item.dlbType==1?'+':'-'}}{{item.dlbNumber}}RB</span></div>
                        <div class="time">{{item.createDate | filterTime}}</div>
                    </div>
                </div>
                <div class="more" @click="loadmore" v-show="!lastPage">查看更多</div>
            </div>
            <PictureTips srcType="nolist" text="暂无账单" v-else></PictureTips>
        </div>
    </div>
</template>

<script>
import mtHeader from "@/components/Header"
import { GetBillList } from '@/api/api'
import { parseTime } from '@/utils'
import PictureTips from "@/components/PictureTips/index.vue"
export default {
  data() {
    return {
        isShow:false,
        pageSize:20,
        currentPage:1,
        lastPage:true,
        totalElements:0,
        list:[]
    }
  },
  components:{
    mtHeader,
    PictureTips
  },
  mounted(){
    this.getList();
  },
  filters:{
    filterTime:function(val){
      return parseTime(val)
    }
  },
  methods: {
    getList(){
        GetBillList({
            size: this.pageSize,
            page: this.currentPage
        }).then(res => {
            if( res.code == 200 ){
                this.list = this.list.concat(res.data.dataList);
                this.currentPage = res.data.currentPages;
                this.lastPage = res.data.lastPage;
                this.totalElements = res.data.totalElements

                this.$nextTick(() => {
                    this.isShow = true;
                })
            }
        })
    },
    loadmore(){
        this.currentPage++;
        this.getList();
    }
  }
}
</script>

<style lang="stylus" scoped>
.wrapper{
    height:100%;
    .inner{
        height:100%;
        padding-top:50px;
        overflow-x: hidden;
        overflow-y: scroll;
        /*解决ios上滑动不流畅*/
        -webkit-overflow-scrolling: touch;
        .list{
            margin:0;
            padding: 0 15px;
            .item{
                padding:17px 0;
                border-bottom:1px solid #f2f3f9;
                .icon{
                    width:44px;
                    height:44px;
                    display:inline-block;
                    line-height:44px;
                    border-radius:50%;
                    color:#fff;    
                    font-size:24px;
                    text-align:center;
                    background:#ff6508;
                    float:left;
                    position:relative;
                    span{
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                    }
                    &.bg1{
                        background:#75BBFF;
                    }
                    &.bg3{
                        background:#A5A1FF;
                    }
                    &.bg4{
                        background:#63d55e;
                    }
                    &.bg5{
                        background:#2ba5ce;
                    }
                    &.bg9{
                        background:#FF6F6F;
                    }
                    &.bg13{
                        background:#FFAE1E;
                    }
                }
                .info{
                    margin-left:50px;
                    height:44px;
                    color:#B3B3B3;
                    .desc{
                        overflow:hidden;
                        margin-bottom:6px;
                        color:#666666;
                        span{
                            float:left;
                            &:last-child{
                                float:right;
                                color:#858585;
                            }
                        }
                    }
                }
            }
            .more{
                text-align:center;
                margin-top:15px;
                margin-bottom:15px;
                color:#bfbfbf;
                font-size:12px;
            }
        }
    }
}
</style>
